<template>
  <section>
    <el-row>
      <el-table :data="userAuthenticationList" v-if="userAuthenticationList">
        <el-table-column type="index" width="50"></el-table-column>
        <el-table-column prop="id" label="用户ID">
        </el-table-column>
        <el-table-column prop="userAuthentication.idCardName" label="用户姓名" >
        </el-table-column>
        <el-table-column prop="sex" label="性别" >
          <template slot-scope="scope">
            <span v-if="scope.row.userAuthentication.sex === 1">男</span>
            <span v-else-if="scope.row.userAuthentication.sex === 2">女</span>
            <span v-else>未填写</span>
          </template>
        </el-table-column>
        <el-table-column label="状态" width="255">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="authentication(scope)">验证</el-button>
            <el-button type="primary" size="mini" @click="browseIdCardImg(scope)">浏览</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination v-show="totalPage>0" style="margin-top:10px;" background layout="prev, pager, next" :page-count="totalPage" @current-change="goPage">
      </el-pagination>
    </el-row>

    <el-dialog title="坐诊安排" :visible.sync="showIdCardImg">
      <section v-if="currUser" style="border: 1px solid crimson; display: flex;justify-content: center">
        <div>
        <el-row >
          <img style="width: 400px" :src=currUser.data.idCardImg>
        </el-row>
        <el-row style="border: 1px solid crimson;">
          <el-col style="border: 1px solid crimson;text-align: center" :span="7"><div>姓名：</div></el-col>
          <el-col :span="10"><div>{{currUser.userAuthentication.idCardName}}</div></el-col>
        </el-row>
        <el-row>
          <el-col style="border: 1px solid crimson;text-align: center"  :span="7"><div>身份证号码：</div></el-col>
          <el-col :span="10"><div>{{currUser.userAuthentication.idCardNum}}</div></el-col>
        </el-row>
        </div>
      </section>
      <!--<el-row v-if="currUser">-->
      <!--<el-col :span="20">-->
      <!--<el-row>-->
      <!--<el-col :span="20">姓名：</el-col>-->
      <!--<el-col :span="14">{{currUser.idCardName}}</el-col>-->
      <!--</el-row>-->
      <!--&lt;!&ndash;<el-row>&ndash;&gt;-->
      <!--&lt;!&ndash;<el-col :span="4">身份证号码：</el-col>&ndash;&gt;-->
      <!--&lt;!&ndash;<el-col :span="14">{{currUser.idCardNum}}</el-col>&ndash;&gt;-->
      <!--&lt;!&ndash;</el-row>&ndash;&gt;-->
      <!--</el-col>-->
      <!--<el-col :span="50">-->

      <!--<el-col :span="20">身份证号码：</el-col>-->
      <!--<el-col :span="40">{{currUser.idCardNum}}</el-col>-->
      <!--&lt;!&ndash;<img style="width: 200px" :src=currUser.data.idCardImg>&ndash;&gt;-->
      <!--</el-col>-->
      <!--</el-row>-->
    </el-dialog>
  </section>
</template>

<script>
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  import DateFormat from '@/common/date-formater'
  import schedule from "../../sdk/api/schedule"
  import department from "../../sdk/api/department"
  import errHandler from '@/assets/errHandler'
  import Vue from 'vue'//后续添加属性，需要vue联动
  export default {
    name: "VerifiedManagement",
    data() {
      return {
        totalPage:0,
        userAuthenticationList:null,
        showIdCardImg:false,
        currUser:null
      }
    },
    created(){
      //加载待验证的用户列表
      this.loadUserAuthenticationList()
    },
    watch:{
    },
    methods: {
      ...mapActions({
        fetch: 'fetch'
      }),
      goPage(val){
        this.loadUserAuthenticationList(val-1)
      },
      loadUserAuthenticationList(pageNo){
        this.fetch({name:"getUserAuthenticationList",data:{state:0,page:pageNo? pageNo:0}})
          .then(res=>{
            console.log(res)
            this.userAuthenticationList = res
            this.totalPage = res.totalPages
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      authentication(scope){
        console.log(scope)
        // this.getIdCardByLocal(path)
      },
      getIdCardByLocal(url){
        this.fetch({name:"getIdCardByWeb",data:{url}})
          .then(res=>{
            console.log(res)
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      browseIdCardImg(scope){
        console.log(scope)
        this.currUser = scope.row
        this.showIdCardImg = true
      }
    }
  }
</script>

<style scoped>

</style>
